import React, { Component } from 'react'

import { Route,Switch,Redirect } from 'react-router-dom'

import About from './pages/About'
import Home from './pages/Home'

import MyNavLink from './components/MyNavLink'

import './App.css'

export default class App extends Component {
    render() {
        return (
            <div className="container">
                <div className="header">
                    <h2>React-Route-Demo</h2> 
                </div>
                <div className="main">
                    <div className="left-menu">
                        <ul>
                            <li>
                                <MyNavLink  to="/about" >About</MyNavLink>
                            </li>
                            <li>
                                <MyNavLink  to="/home">Home</MyNavLink>
                            </li>
                        </ul>
                    </div>
                    <div className="right-content">
                        <Switch>
                            <Route path="/about" component={ About } />
                            <Route path="/home" component={ Home } />
                            <Redirect to="about" />
                        </Switch>
                    </div>
                </div>
            </div>
        )
    }
}
